<template>
  <div :style="{...styles.scroll}">
    <vue3-seamless-scroll
        :list="list" :modelValue="open"
        :direction="direction" :hover="hover"
        :limitScrollNum="limitScrollNum" :step="step"
        :singleHeight="singleHeight" :singleWidth="singleWidth"
        :singleWaitTime="singleWaitTime" :delay="delay"
        :copyNum="copyNum" :singleLine="singleLine"
    >
      <slot></slot>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup lang="ts">

import { CSSProperties} from "vue";

const props = defineProps({
  // 无缝滚动列表数据，组件内部使用列表长度。
  list: {
    type:Array,
    required: true
  },
  // 通过v-model控制动画滚动与停止，默认开始滚动
  open: {
    type: Boolean,
    default: true,
    required: false
  },
  //控制滚动方向，可选值up，down，left，right
  direction: {
    type: String,
    default: "up",
    required: false
  },
  //是否开启鼠标悬停 默认不开启，修改开启
  hover: {
    type: Boolean,
    default: true,
    required: false
  },
  //开启滚动的数据量，只有列表长度大于等于该值才会滚动
  limitScrollNum: {
    type: Number,
    default: 2,
    required: false
  },
  //步进速度
  step: {
    type: Number,
    default: 0.5,
    required: false
  },
  //单步运动停止的高度
  singleHeight: {
    type: Number,
    default: 0,
    required: false
  },
  //单步运动停止的宽度
  singleWidth:{
    type: Number,
    default: 0,
    required: false
  },
  //单步停止等待时间(默认值 1000ms)
  singleWaitTime:{
    type: Number,
    default: 1000,
    required: false
  },
  //动画延时时间
  delay:{
    type: Number,
    default: 0,
    required: false
  },
  //拷贝列表次数，默认拷贝一次，当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果
  copyNum:{
    type: Number,
    default: 1,
    required: false
  },
  //启用单行横向滚动
  singleLine:{
    type: Boolean,
    default: false,
    required: false
  }
})

const styles: Record<string, CSSProperties> = {
  scroll: {
    height: "90%",
    width: "90%",
    margin: "10px auto",
    overflow: "hidden",
  }
}

</script>

<style scoped lang="scss">

</style>